<template>
  <div class="app">
   <el-row :gutter="12" class="userInfo">
      <el-col :span="4">
         <el-card shadow="always" body-style="height:350px">
            <div class="aside">
             <el-menu active-text-color="#ffd04b">  
               <el-menu-item index="1">
                  <a href="#/user/profile" class="tag">我的资料</a>
               </el-menu-item>
               <el-menu-item index="2">
                  <a href="#/user/blog" class="tag">我的博客</a>
               </el-menu-item>
               <el-menu-item index="3">
                  <a href="#/user/follow" class="tag">我的关注</a>
               </el-menu-item>
               <el-menu-item index="4">
                  <a href="#/user/fans" class="tag">我的粉丝</a>
               </el-menu-item>
               <el-menu-item index="5">
                  <a href="#/user/chatroom" class="tag">在线聊天室</a>
               </el-menu-item>
             </el-menu>
            </div>
         </el-card>
      </el-col>
      <el-col :span="16">
         <el-card shadow="always" body-style="height:500px">
               <div class="background">
               </div>
               <div class="user">
                     <div class="userIcon">
                     <el-upload :action="Icon" :with-credentials='true' accept="image/jpeg,image/gif,image/png" :limit="1" :show-file-list="false" :on-success="handleSuccess">
                        <el-avatar  :size="70" :src="form.authorImg" @error="errorHandler">
                           <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                        </el-avatar>
                        <el-button type="text" size="small" icon="el-icon-upload">修改头像</el-button>
                     </el-upload>
                     </div>
                     <div class="simple">
                        <el-button type="text" size="small" icon="el-icon-edit" @click="personal=true">修改个人资料</el-button>
                        <el-button type="text" size="small" icon="el-icon-edit" @click="password=true">修改用户密码</el-button>
                        <el-dialog title="修改个人信息" :visible.sync="personal" width="30%" class="dialog">  
                           <div class="box">              
                           <el-input :disabled="true" v-model="changeform.username" placeholder="用户名"></el-input>
                           </div>
                           <div class="box1">
                           <el-radio v-model="changeform.sex" label="男">男</el-radio>
                           <el-radio v-model="changeform.sex" label="女">女</el-radio>
                           </div>
                           <div class="box">
                           <el-input v-model="changeform.email" placeholder="邮箱"></el-input>
                           </div>
                           <div class="box">
                           <el-input v-model="changeform.address" placeholder="地址"></el-input>
                           </div>
                           <div class="box">
                           <el-input v-model="changeform.introduce" placeholder="个人简介"></el-input>
                           </div>
                           <div class="box">
                           <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="selectTime" placeholder="请输入出生日期" v-model="changeform.birthday" style="float:left;width: 100%;"></el-date-picker>
                           </div>
                           <div slot="footer" class="dialog-footer"><center>
                           <el-button @click="personal = false" size="small">取 消</el-button>
                           <el-button type="primary" @click="submit('editForm')" size="small">确 定</el-button>
                           </center></div>
                        </el-dialog>
                        <el-dialog title="修改用户密码" :visible.sync="password" width="30%" class="dialog">
                           <div class="box">              
                           <el-input type="password" v-model="updateform.password" placeholder="用户密码"></el-input>
                           </div>
                           <div class="box">              
                           <el-input type="password" v-model="replypassword" placeholder="确认密码"></el-input>
                           </div>
                            <div slot="footer" class="dialog-footer"><center>
                           <el-button @click="password = false" size="small">取 消</el-button>
                           <el-button type="primary" @click="changepassword" size="small">确 定</el-button>
                           </center></div>
                        </el-dialog>
                     </div>
                     <div class="simple">
                        <span class="tagfont">用户名:</span>
                        <span class="infofont" style="padding-left:25px">{{form.username}}</span>
                     </div>
                     <div class="simple">
                        <span class="tagfont">性别:</span>
                        <i v-if="form.sex=='男'" class="el-icon-male infofont" style="padding-left:38px">{{form.sex}}</i>
                        <i v-if="form.sex=='女'" class="el-icon-female infofont" style="padding-left:38px">{{form.sex}}</i>
                     </div>
                     <div class="simple">
                        <span class="tagfont">邮箱:</span>
                        <span class="infofont" style="padding-left:42px">{{form.email}}</span>
                     </div>
                     <div class="simple">
                        <span class="tagfont">地址:</span>
                        <span class="infofont" style="padding-left:42px">{{form.address}}</span>
                     </div>
                     <div class="simple">
                        <span class="tagfont">出生日期:</span>
                        <span class="infofont">{{form.birthday}}</span>
                     </div>
                     <div class="simple">
                        <span class="tagfont">个人简介:</span>
                        <span class="infofont">{{form.introduce}}</span>
                     </div>
               </div>
         </el-card>    
      </el-col>
   </el-row>
  </div>
</template>

<script>
import {apiurl} from "../../service/api.js";
import usernavbar from '../../assets/navbar.png'

export default {
   created(){
      this.getInfo()
   },
   data(){
      return{
         personal : false,
         password : false,
         nvabar : usernavbar,
         form : {
            username : '',
            sex : '',
            introduce : '',
            email : '',
            birthday : '',
            address : '',
            authorImg : '',
         },
         changeform : {
            username : '',
            sex : '',
            introduce : '',
            email : '',
            birthday : '',
            address : '',
         },
         updateform :{
            password: '',
         },
         replypassword: '',
         Icon : apiurl.IconUrl,
      }
   },methods:{
      getInfo(){
         var that = this
         that.$axios.get({
            url: apiurl.userInfo,
         }).then(res => {
            if(res.data.code==200){  
               //用户需要渲染的数据
               var data = res.data.userInfo
               that.form.username = data.username
               that.form.sex = data.sex
               that.form.introduce = data.introduce
               that.form.email = data.email
               that.form.birthday = data.birthday
               that.form.address = data.address
               //修改用户信息所显示的数据
               that.changeform.username = data.username
               that.changeform.sex = data.sex
               that.changeform.introduce = data.introduce
               that.changeform.email = data.email
               that.changeform.birthday = data.birthday
               that.changeform.address = data.address
               if(data.authorImg==''){
                  //默认头像
                  that.form.authorImg = require('../../assets/icon.jpg')
               }else{
                  that.form.authorImg = data.authorImg
               }
            }else{
               that.$message.error(`获取用户数据失败`)
            }
         })
   },
   errorHandler() {
        return true
      },
   //成功上传图片后
   handleSuccess(response, file, fileList) {
      this.form.authorImg = response.url
      //让顶部头像实时更新
      document.querySelector("body > div > div.nav-menu > div > div > div > div > img").src = response.url
    },
    selectTime(val){
      this.changeform.birthday = val;
      // console.log(val);
      },
    submit(formName){
       //提交修改
        var that = this
         that.personal =false
         that.$axios.post({
            url: apiurl.updateUserInfo,
            data: that.changeform 
         }).then(res=>{
            if(res.data.code==200){
               that.form.username = that.changeform.username
               that.form.sex = that.changeform.sex
               that.form.address = that.changeform.address
               that.form.email = that.changeform.email
               that.form.birthday = that.changeform.birthday
               that.form.introduce = that.changeform.introduce
               that.$message.success(`修改成功`)
            }
         })
    },
    changepassword(){
       var that  =this
       if(that.updateform.password == that.replypassword){
          var psd = {
          password : this.$md5(that.updateform.password)
       }
       that.$axios.post({
          url : apiurl.updatepassword,
          data : psd
       }).then(res=>{
          if(res.data.code==200){
             that.$message.success(`修改成功`)
             that.password = false
          }
       })
       }else{
          that.$message.error(`密码不一致`)
       }
       
    },
    UpNumber(e) {
       e.target.value = e.target.value.replace(/[^\d]/g,"");
    }
   } 
}
</script>



<style  scoped>
.app{
   position: relative;
   margin-top: 20px;
}
/*渐入动画*/
.userInfo
{
    padding-left : 15%;
    padding-top: 2%;
	position:relative;
	animation:mymove 1s forwards;
}

@keyframes mymove
{
	from {left:-1000px;}
	to {left:0px;}
}
.background{
   height: 100px;
   width: 100%;
   padding-top:10px;
   background: url('../../assets/navbar.png')
}

.user{
   height: 350px;
   margin:20px 0;
   background: rgba(184, 178, 178, 0.1);
}
.aside{
   height: 330px;
   /* width: 80%; */
}
.tag{
   height: 66px;
   font-size: 20px;
   color:rgb(0, 162, 255);
   text-decoration:none;
}
.userIcon{
   padding-top : 20px;
   padding-left: 45%;
}
.simple{
   padding-top : 5px;
   padding-left: 40%;
}
.tagfont{
   font-family: 'Courier New', Courier, monospace;
   color: blueviolet
}
.infofont{
   padding-left: 10px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.box{
 
   padding-top : 15px;
   width: 60%;
   padding-left: 20%;
   
}
.box1{
   position: relative;
   padding-top: 10px;
   padding-left: 20%;
 
}
.dialog-footer{
   position: relative;
   padding-top: 20px;
}


</style>

